<template>
    <div>
        <h1 style="font-size: 72px;">DAY02作业</h1>
        <table :class="{table_css:ok}">
            <tr style="text-align: center;">
                <th>序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in goods_List" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td><button class="b1" @click="item.num++">+</button>{{ item.num }}<button class="b1" @click="item.num--">-</button></td>
                <td><button @click="func(index)">移除</button></td>
            </tr>
        </table>
        <h3>
            总价：${{ sum }}
        </h3>
    </div>
</template>


<script>
export default {
    name:"day02",
    data() {
        return {
            ok:true,
            goods_List:[
                {name:'iPhone 8',price:"5099",num:1},
                {name:'iPhone xs',price:"8699",num:1},
                {name:'iPhone xr',price:"6499",num:1},
            ],
        }
    },
    methods: {
        func(index){
            return this.goods_List.splice(index,1)
        },
    },
    computed: {
        sum(){
            let total = 0
            for (let index = 0; index < this.goods_List.length; index++) {
                total += this.goods_List[index].price*this.goods_List[index].num
            }
            return total
        }
    },
}
</script>



<style>
    .table_css{
        border: 1px solid black;
        font-size: large;
        padding: 2px;
    }
    tr{
        height: 50px;
        border: 1px solid black;
        text-align: center;
    }
    th{
        padding: 5px;   
        width: 200px;
    }
    .b1{
        width: 30%;
        height: 20%;
    }
</style>